<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
        }
        .box{
            width: 100px;
            height: 2000px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // DOM : doucument object model 文档对象模型
        // 和浏览器有关的内容 称为 BOM: browser object model 浏览器对象模型
        // dom里 对外有一个顶级对象 ： window
        // window 对象 单例模式 全局范围内有且只有一个
        // window 对象可以加 也可以省略；
        // var a = 10;
        // // console.log(window);
        // console.log(window.a);
        // console.log(a);

        // 几个弹框
        // 1. alert()
        // window.alert("弹出了");
        // 2.confirm 询问框 : 确定和 取消 ，如果点了确定 就返还true ，否则就返还false
    //    var res =  window.confirm("确定要删除吗?");
    //    console.log(res);
    //    if(res){
    //     console.log("删除了");
    //    }else{
    //     console.log("取消了");
    //    }
        // 3.prompt 输入框
    //    var num =  window.prompt("请输入数字");
    //    console.log(num);

    // 1.获取浏览器的宽和高 innerWidth/innerHeight
    // 注意 ：包含滚动条的宽或者高
    // 获取浏览器的宽 
    // console.log( innerWidth);
    // 获取浏览器的高
    // console.log(innerHeight);

    // 2.获取不包含滚动条的宽和高 
    // console.log(document.documentElement.offsetWidth)
    // console.log(document.documentElement.offsetHeight);

    // 小练习 ：一个方块点击之后 运动到最右边的可视极限距离





    </script>
</body>
</html>